[V0_FILE]plaintext:file="public/kessoku-band-bocchi-the-rock.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kessoku-band-bocchi-the-rock-moewalls-com-obonGDQs7uOs42okvMAeudnfpyGFbE.mp4" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import "./globals.css" export const metadata: Metadata = { title: "Portfolio - John Doe", description: "Full Stack Developer Portfolio", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]plaintext:file="public/sk-telecom-t1-lol.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sk-telecom-t1-logo-league-of-legends-moewalls-com-g4niVEiTeIWOl1v7y1iyTIxmHGAB9V.mp4" isMerged="true" [V0_FILE]typescriptreact:file="components/spotify-player.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Play, Pause, Music } from "lucide-react" interface SpotifyTrack { name: string artist: string album: string image: string external_url: string preview_url: string | null } interface SpotifyData { isPlaying: boolean track: SpotifyTrack | null } interface SpotifyPlayerProps { mode?: "social" | "gaming" } export function SpotifyPlayer({ mode = "social" }: SpotifyPlayerProps) { const [spotifyData, setSpotifyData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [audio, setAudio] = useState(null) const [isPreviewPlaying, setIsPreviewPlaying] = useState(false) const [isSliding, setIsSliding] = useState(false) const [previousTrack, setPreviousTrack] = useState(null) useEffect(() => { fetchSpotifyData() const interval = setInterval(fetchSpotifyData, 5000) // Update every 5 seconds return () => clearInterval(interval) }, []) useEffect(() => { if (spotifyData?.track && previousTrack && spotifyData.track.name !== previousTrack.name) { setIsSliding(true) setTimeout(() => { setIsSliding(false) setPreviousTrack(spotifyData.track) }, 300) } else if (spotifyData?.track && !previousTrack) { setPreviousTrack(spotifyData.track) } }, [spotifyData?.track, previousTrack]) const fetchSpotifyData = async () => { try { const response = await fetch("/api/spotify") const data = await response.json() setSpotifyData(data) } catch (error) { console.error("Error fetching Spotify data:", error) } finally { setIsLoading(false) } } const togglePreview = () => { if (!spotifyData?.track?.preview_url) return if (audio) { if (isPreviewPlaying) { audio.pause() setIsPreviewPlaying(false) } else { audio.play() setIsPreviewPlaying(true) } } else { const newAudio = new Audio(spotifyData.track.preview_url) newAudio.addEventListener("ended", () => setIsPreviewPlaying(false)) newAudio.play() setAudio(newAudio) setIsPreviewPlaying(true) } } const openSpotify = () => { if (spotifyData?.track?.external_url) { window.open(spotifyData.track.external_url, "_blank") } } const textColors = { primary: mode === "social" ? "text-gray-900" : "text-white", secondary: mode === "social" ? "text-gray-700" : "text-white/70", } if (isLoading) { return (

) } if (!spotifyData?.track) { return (

) } return (

{/* Spotify Player Card */}

{/* Album Art */}

{/* Track Info */}

{spotifyData.track.name}

{spotifyData.track.artist}

{/* Controls */}

{spotifyData.track.preview_url && ( )}

) } [V0_FILE]typescript:file="app/api/spotify/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" const SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET const SPOTIFY_REFRESH_TOKEN = process.env.SPOTIFY_REFRESH_TOKEN async function getAccessToken() { if (!SPOTIFY_CLIENT_ID || !SPOTIFY_CLIENT_SECRET || !SPOTIFY_REFRESH_TOKEN) { throw new Error("Missing Spotify environment variables") } const response = await fetch("https://accounts.spotify.com/api/token", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", Authorization: `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString("base64")}`, }, body: new URLSearchParams({ grant_type: "refresh_token", refresh_token: SPOTIFY_REFRESH_TOKEN, }), }) if (!response.ok) { throw new Error("Failed to get access token") } const data = await response.json() return data.access_token } export async function GET() { try { const accessToken = await getAccessToken() const response = await fetch("https://api.spotify.com/v1/me/player/currently-playing", { headers: { Authorization: `Bearer ${accessToken}`, }, }) if (response.status === 204) { return NextResponse.json({ isPlaying: false, track: null }) } if (!response.ok) { throw new Error("Failed to get current track") } const data = await response.json() return NextResponse.json({ isPlaying: data.is_playing, track: { name: data.item?.name, artist: data.item?.artists?.[0]?.name, album: data.item?.album?.name, image: data.item?.album?.images?.[0]?.url, external_url: data.item?.external_urls?.spotify, preview_url: data.item?.preview_url, }, }) } catch (error) { console.error("Spotify API error:", error) return NextResponse.json({ error: "Failed to fetch Spotify data" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { SpotifyPlayer } from "@/components/spotify-player" import { useState } from "react" import { ChevronRight, ChevronLeft } from "lucide-react" export default function Portfolio() { const [showRedirectModal, setShowRedirectModal] = useState(false) const [redirectUrl, setRedirectUrl] = useState("") const [socialPlatform, setSocialPlatform] = useState("") const [isGamingPortfolio, setIsGamingPortfolio] = useState(false) const handleExternalLink = (url: string, platform: string) => { setRedirectUrl(url) setSocialPlatform(platform) setShowRedirectModal(true) } const proceedToLink = () => { window.open(redirectUrl, "_blank") setShowRedirectModal(false) } const getPlatformStyle = (platform: string) => { const styles = { discord: { color: "#5865F2", icon: "discord" }, x: { color: "#000000", icon: "x" }, telegram: { color: "#0088cc", icon: "telegram" }, linkedin: { color: "#0077b5", icon: "linkedin" }, roblox: { color: "#00A2FF", icon: "roblox" }, valorant: { color: "#FF4655", icon: "riotgames" }, fortnite: { color: "#0078F2", icon: "epicgames" }, steam: { color: "#000000", icon: "steam" }, } return styles[platform as keyof typeof styles] || styles.discord } const togglePortfolio = () => { setIsGamingPortfolio(!isGamingPortfolio) } return (

{/* Video Background */}

{/* Social Media Buttons */}

{/* Spotify Player Component */}

{showRedirectModal && (

Redirecionando

Saindo da página

{redirectUrl}

)}

) }

About

Tags

Share

About

Tags

Share

More from biglongs1

More Templates Like This